<template>
    <div>
      <mu-appbar style="width: 100%;" color="primary" fixed>
        <mu-button icon slot="left" to="/find">
            <mu-icon value="reply"></mu-icon>
        </mu-button>
        益多多
        <mu-button flat slot="right">
            <mu-icon value="more_horiz"></mu-icon>
        </mu-button>
        </mu-appbar>
        <br>
        <mu-container>
            <mu-form ref="form" :model="form" class="mu-demo-form" label-position="left" label-width="100"> 
                <mu-form-item prop="title" label="活动标题" :rules="rules">
                  <mu-text-field v-model="form.title" prop="title"></mu-text-field>
                </mu-form-item>
                <mu-form-item prop="area" label="活动地点" :rules="rules">
                <mu-select v-model="form.area"  prop="area">
                    <mu-option v-for="(option,index) in options" :key="index" :label="option" :value="option"></mu-option>
                </mu-select>
                </mu-form-item>
                <mu-form-item prop="starttime" label="活动开始时间" :rules="starttimerules">
                  <mu-date-input v-model="form.starttime" type="dateTime" prop="starttime" actions></mu-date-input>
                </mu-form-item>
                <mu-form-item prop="endtime" label="活动结束时间" :rules="endtimerules">
                  <mu-date-input v-model="form.endtime" type="dateTime" prop="endtime" actions></mu-date-input>
                </mu-form-item>
                <mu-form-item prop="contector" label="活动负责人" >
                  <mu-text-field v-model="form.contector" prop="contector"></mu-text-field>
                </mu-form-item>
                <mu-form-item prop="phone" label="联系电话" :rules="rules">
                  <mu-text-field v-model="form.phone" prop="phone"></mu-text-field>
                </mu-form-item>
                <mu-form-item prop="type" label="活动类型" :rules="rules">
                <mu-checkbox v-model="form.type" value="支教" label="支教"></mu-checkbox>
                <mu-checkbox v-model="form.type" value="关爱儿童" label="关爱儿童"></mu-checkbox>
                <mu-checkbox v-model="form.type" value="关爱老人" label="关爱老人"></mu-checkbox>
                <mu-checkbox v-model="form.type" value="社区服务" label="社区服务"></mu-checkbox>
                </mu-form-item>
                <mu-form-item prop="address" label="活动详细地点" :rules="rules">
                  <mu-text-field v-model="form.address" prop="address"></mu-text-field>
                </mu-form-item>
                <mu-form-item prop="describe" label="活动内容" :rules="rules">
                  <mu-text-field multi-line :rows="3" :rows-max="6" v-model="form.describe" prop="describe"></mu-text-field>
                </mu-form-item>
                <mu-form-item prop="requirement" label="活动要求" :rules="rules">
                  <mu-text-field multi-line :rows="3" :rows-max="6" v-model="form.requirement" prop="requirement"></mu-text-field>
                </mu-form-item>
                <div class="uploaddiv">
                  <el-upload
                    ref="upload"
                    action="/api/activity/uploadpic"
                    list-type="picture-card"
                    :multiple="false"
                    :limit="1"
                    :auto-upload='false'
                    :before-upload="beforeUpload"
                    :on-preview="handlePictureCardPreview">
                    <img v-if="dialogImageUrl" :src="dialogImageUrl" class="dialogImageUrl">
                    <i v-else class="el-icon-plus"></i>
                  </el-upload>
                </div>
                <br>
                <mu-flex justify-content="center" align-items="center">
                  <mu-button round color="success" @click.native="submit()">提交</mu-button>
                </mu-flex>
            </mu-form>
            <br><br><br><br>
        </mu-container>
    </div>
</template>

<script>
import axios from "axios";
import Message from "muse-ui-message";
import Toast from "muse-ui-toast";
export default {
  data() {
    return {
      options: [
        "白云区",
        "天河区",
        "越秀区",
        "荔湾区",
        "增城区",
        "从化区",
        "花都区",
        "番禺区",
        "海珠区",
        "黄浦区"
      ],
      form: {
        title: "",
        phone: "",
        area: "",
        email: "",
        starttime: "",
        endtime: "",
        type: [],
        describe: "",
        address: "",
        contector: "",
        user: ""
      },
      dialogImageUrl: "",
      dialogVisible: false,
      rules: [{ validate: val => !!val, message: "本项不得为空" }],
      starttimerules: [{ validate: val => !!val, message: "本项不得为空" }],
      endtimerules: [{ validate: val => !!val, message: "本项不得为空" }],
      datafiles: []
    };
  },
  computed: {
    starttime() {
      return new Date(this.form.starttime).getTime();
    },
    endtime() {
      return new Date(this.form.endtime).getTime();
    }
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = false;
    },
    upload(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.datafiles = files;
    },
    submit() {
      this.$refs.form.validate().then(result => {
        if (
          result &&
          this.starttime > Date.now() &&
          this.endtime > this.starttime
        ) {
          Message.confirm("您确认发布吗?", "确认").then(conresult => {
            let formData = new FormData();
            formData.append("file", this.datafiles[0]);
            if (conresult.result) {
              axios
                .post("/api/activity/upload", {
                  form: this.form
                })
                .then(res => {
                  this.$refs.upload.submit();
                  this.form.title = "";
                  this.form.phone = "";
                  this.form.requirement = "";
                  this.form.starttime = "";
                  this.form.endtime = "";
                  this.form.describe = "";
                  this.form.area = "";
                  this.form.type = [];
                  this.form.address = "";
                  this.dialogImageUrl = "";
                  this.form.contector = "";
                  Toast.success("发布成功");
                  this.$router.push("/find");
                })
                .catch(err => {
                  console.log(err);
                });
            } else {
              Toast.error("取消发布");
            }
          });
        }
        if (this.starttime <= Date.now()) {
          Toast.error("活动开始时间必须晚于当前时间");
        }
        if (this.starttime >= this.endtime) {
          Toast.error("活动结束时间必须晚于开始时间");
        }
      });
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        Toast.error("上传图片只能是 jpg/png 格式!");
      }
      if (!isLt2M) {
        Toast.error("上传图片大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    }
  },
  mounted() {
    axios
      .get("/api/user/layin", {})
      .then(res => {
        this.form.user = res.data;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style>
.mu-demo-form {
  width: 100%;
}
.uploaddiv {
  width: 148px;
  height: 148px;
  margin: auto;
  overflow: hidden;
}
</style>
